<template>
    <div class="container">
        <el-input class="head-input" v-model="input" placeholder="搜索"></el-input>
        <el-button class="add-button" type="primary" @click="addPeople">+</el-button>
    </div>
    
    <el-table
      :data="tableData"
      :show-header="false"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
    </el-table>
</template>

<script>
    import Bus from '../bus/bus.js';
    export default {
        data() {
            return {
                tableData: [{
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                }],
                input: ''
            }
        },
        methods: {
            addPeople(){
                console.log("添加朋友");
                 // 触发自定义事件
                 Bus.$emit('addAge',{age:'19'});
            }
        },
    }
</script>

<style>
.container {
  display: flex; /* 设置flex布局 */
  float: left; 
  gap: 10px; /* 设置元素间隔 */
  margin-top: 8px;
}

.head-input{
    margin: 8px;
}

.add-button{
    margin-top: 8px;
    margin-bottom: 8px;
}

.component-item {
  background-color: #f0f0f0; /* 设置背景色 */
  padding: 10px; /* 设置内边距 */
  border: 1px solid #ddd; /* 设置边框 */
}
.span {
  display: flex;
  align-items: center;
  justify-content: center; /* 如果你还希望文字水平居中 */
}
</style>